<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="/css/myblog.css">
    <title>关于我</title>
</head>
<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary menu stackable">
                <h2 class="ui teal header item">Blog</h2>
                <a href="/" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <a href="/page_types" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="/page_tags" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                <a href="/archives" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                <a href="/about" class="m-item item m-mobile-hide active"><i class="info icon"></i>关于我</a>
                <div class="m-item right item  m-mobile-hide">
                    <form action="/search" method="get">
                        <div class="ui action input inverted transparent ">
                            <input type="text" name="title" placeholder="search...">
                            <button class="ui icon button" type="submit">
                                <i class="search icon"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <a id="b1" href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <!--中间内容-->
    <div class=" m-padded-tb-big">
        <div class="ui container">
            <div class="ui grid rounded mobile stackable">
                <div class="eleven wide column ">
                    <div class="ui segment" >
                        <img src="/images/头像.jpg" alt="" class="ui rounded image" >
                    </div>
                </div>
                <div class="five wide column rounded">
                    <div class="ui top attached segment">
                        <div class="ui header teal">关于我</div>
                    </div>
                    <div class="ui attached segment">
                        <p class="m-text-heavy">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;19级在读大学生，就读于浙江师范大学，从大一开始便励志做出一款有灵魂的App以证明自己，并为此不断努力学习技术。 技术方向主要是全栈开发，喜欢思考，爱好健身，热衷于研究IT技术，探索未知领域。写博文主要是为了学习分享以及记录我的生活。曾任软件设计与创新协会第五任会长，软件创新实验室负责人。</p>
                        <p class="m-text-heavy">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有人问我为什么这么早开始学java，答案其实很简单——我不想让自己的大学生活荒废，我想在大学留下一段美好热血的回忆。</p>
                    </div>
                    <div class="ui attached segment ">
                        <div class="ui orange basic label left pointing">编程</div>
                        <div class="ui orange basic label left pointing">思考</div>
                        <div class="ui orange basic label left pointing">分享</div>
                        <div class="ui orange basic label left pointing">健身</div>
                        <div class="ui orange basic label left pointing">追梦</div>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui teal basic label left pointing">Java</div>
                        <div class="ui teal basic label left pointing">全栈开发</div>
                        <div class="ui teal basic label left pointing">架构设计</div>
                    </div>
                    <div class="ui bottom attached segment center aligned " >
                        <a href="https://github.com/BestDreamChaser" class="ui circular icon button m-margin-lr-small">
                            <i class="ui github icon"></i>
                        </a>
                        <a href="#" id="qq" class="ui circular icon button m-margin-lr-small">
                            <i class="ui qq icon"></i>
                        </a>
                        <a href="#" id="wechat" class="ui circular icon button m-margin-lr-small">
                            <i class="ui wechat icon"></i>
                        </a>

                    </div>
                    <div id="wechat-qr" class="ui flowing popup transition hidden">
                        <img src="/images/wechat-add.png" alt="" class="ui rounded image" style="width: 110px">
                    </div>
                    <div id="qq-qr" class="ui flowing popup transition hidden">
                        <img src="/images/qq-add.png" alt="" class="ui rounded image" style="width: 110px">
                    </div>
                    <!--二维码-->
                    <div class="ui horizontal divider header">扫码关注我</div>
                    <div class="ui card centered" style="width: 11em">
                        <img src="/images/csdn.png" alt="" class="ui rounded image">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--底部footer-->
    <footer class="ui inverted vertical segment m-opacity-tiny">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="two wide column ">
                    <h4 class="ui inverted header item m-text-thin m-text-spaced m-opacity-mini" >QQ讨论群</h4>
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="/images/QRcode.png" class="ui rounded image item" style="width: 100px">
                        </div>
                    </div>

                </div>
                <div class="five wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <div class="ui inverted link list">
                        <a class="item m-text-lined" th:each="newBlog,iter:${newBlogs}" th:href="@{'/page_blog/'+${newBlog.getId()}}" th:text="${newBlog.getTitle()}">博客1</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <p class="item m-text-lined" href="#">QQ:767564319</p>
                        <p class="item m-text-lined" href="#">email:767564319@qq.com</p>
                        <a class="item m-text-lined" href="https://blog.csdn.net/qq_46101869">CSDN博客</a>
                    </div>
                </div>
                <div class="six wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">博客简介</h4>
                    <p class="m-text-small m-text-thin m-text-spaced m-opacity-mini" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此博客为Dreamchaser追梦的个人博客。在这里，记录了我的技术博客，记录了我的经
                        验分享，也记录了我生活的点滴，记录了我的成长。我特别喜欢一个词，那就是"追梦"，这也是我昵称的由来，同时也是我和我的团队筹备的一款app的名字
                        。人生在世，必然会有自己的梦想，不论这个梦想是大是小，是遥不可及还是触手可得，你所要坚信的便只有一件事——有梦便一定要去追，我们都该是追梦人！不论现在处境如何，我们都要去拼一拼，不试怎么知道你会不会成功呢？愿大家都能以梦为马，不负青春韶华！</p>
                </div>
            </div>
            <div class="ui divider "></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny m-text-lined">Copyright © 2022 Dreamchaser追梦 </p>
            <a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2021036454号</a>
        </div>
    </footer>


<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/Semantic-UI-CSS-master/semantic.min.js"></script>
    <script >

        $("#b1").click(function (){
            $(".m-item").toggleClass("m-mobile-hide");
        });

        $('#wechat').popup({
            popup:$('#wechat-qr'),
            on:'click',
            position:'bottom center'
        })
        $('#qq').popup({
            popup:$('#qq-qr'),
            on:'click',
            position:'bottom center'
        })
    </script>
</body>
</html>
